<template>
  <div class="content-warp">
    <div class="header">
      <div class="header-title">创建交付启动会</div>
      <div class="header-btn">
        <el-button type="primary" icon="Plus" @click="handleSubmit">提交</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </div>
    <div class="main">
      <div class="main-title" @click="openProjectList">
        {{ projectList?.projectName || '-' }}
        <img src="/img/views/pdp/downarrow.png" alt="" />
      </div>
      <div class="main-container">
        <div class="main-container-item">
          <div class="main-container-item-label">项目编号：</div>
          <div class="main-container-item-value">{{ projectList?.projectCode || '-' }}</div>
        </div>
        <div class="main-container-item">
          <div class="main-container-item-label">商机名称：</div>
          <div class="main-container-item-value">{{ projectList?.projectName || '-' }}</div>
        </div>
        <div class="main-container-item">
          <div class="main-container-item-label">行业类别：</div>
          <div class="main-container-item-value">
            <dc-dict
              type="text"
              :options="DC_PMS_PROJECT_INDUSTRY"
              :value="projectList?.industryDictId"
            />
          </div>
        </div>
        <div class="main-container-item">
          <div class="main-container-item-label">特种设备：</div>
          <div class="main-container-item-value">
            <dc-dict
              type="text"
              :options="DC_PMS_PROJECT_QIOPMENT"
              :value="projectList?.quipmentDictId"
            />
          </div>
        </div>
        <div class="main-container-item">
          <div class="main-container-item-label">项目类型：</div>
          <div class="main-container-item-value">
            <dc-dict
              type="text"
              :options="DC_PMS_PROJECT_TYPE"
              :value="projectList?.projectDictId"
            />
          </div>
        </div>
      </div>

      <div class="main-container">
        <div class="main-container-item">
          <div class="main-container-item-label">机构DRI：</div>
          <div class="main-container-item-value">
            <dc-view v-model="projectList.institutionsDriId" objectName="user" />
          </div>
        </div>
        <div class="main-container-item">
          <div class="main-container-item-label">电气DRI：</div>
          <div class="main-container-item-value">
            <dc-view v-model="projectList.electricalDriId" objectName="user" />
          </div>
        </div>
        <div class="main-container-item">
          <div class="main-container-item-label">软件DRI：</div>
          <div class="main-container-item-value">
            <dc-view v-model="projectList.softwareDriId" objectName="user" />
          </div>
        </div>
        <div class="main-container-item">
          <div class="main-container-item-label">BDDRI：</div>
          <div class="main-container-item-value">
            <dc-view v-model="projectList.bdDriId" objectName="user" />
          </div>
        </div>
        <div class="main-container-item">
          <div class="main-container-item-label">TPMDRI：</div>
          <div class="main-container-item-value">
            <dc-view v-model="projectList.tpmDriId" objectName="user" />
          </div>
        </div>
        <div class="main-container-item">
          <div class="main-container-item-label">PMDRI：</div>
          <div class="main-container-item-value">
            <dc-view v-model="projectList.pmDriId" objectName="user" />
          </div>
        </div>
        <div class="main-container-item">
          <div class="main-container-item-label">视觉DRI：</div>
          <div class="main-container-item-value">
            <dc-view v-model="projectList.versionDriId" objectName="user" />
          </div>
        </div>
      </div>

      <div class="main-container-item-remark">
        <div class="main-container-item-label">备注说明：</div>
        <div class="main-container-item-value">
          <el-input
            v-model="projectFormData.remark"
            :autosize="{ minRows: 2 }"
            type="textarea"
            placeholder="请输入备注说明"
          />
        </div>
      </div>
      <div class="main-container-item-remark">
        <div class="main-container-item-label">上传附件：</div>
        <div class="main-container-item-value">
          <dc-upload
            v-model="projectFormData.fileIds"
            :limit="10"
            :targetType="Const.targetType.CUSTOMER"
          />
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="footer-title">专案明细</div>
      <div class="footer-btn">
        <el-button type="primary" plain @click="handleAdd">新增</el-button>
      </div>
      <div class="footer-table">
        <el-table :data="tableData" style="width: 100%" max-height="250">
          <el-table-column label="序号" width="60" type="index" align="center">
            <template #default="scoped">
              <span>{{ (queryParams.current - 1) * queryParams.size + scoped.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="mtoNo" label="专案号" show-overflow-tooltip />
          <el-table-column prop="name" label="成品名称" show-overflow-tooltip />
          <el-table-column prop="number" label="成品码" show-overflow-tooltip />
          <el-table-column prop="institutionsId" label="机构工程">
            <template #default="scoped">
              <dc-view v-model="scoped.row.institutionsId" objectName="user" showKey="realName" />
            </template>
          </el-table-column>
          <el-table-column prop="electricalId" label="电气工程">
            <template #default="scoped">
              <dc-view v-model="scoped.row.electricalId" objectName="user" showKey="realName" />
            </template>
          </el-table-column>
          <el-table-column prop="electricalContrId" label="电子工程">
            <template #default="scoped">
              <dc-view
                v-model="scoped.row.electricalContrId"
                objectName="user"
                showKey="realName"
              />
            </template>
          </el-table-column>
          <el-table-column prop="softwareId" label="软件工程">
            <template #default="scoped">
              <dc-view v-model="scoped.row.softwareId" objectName="user" showKey="realName" />
            </template>
          </el-table-column>
          <el-table-column prop="tpmId" label="TPM">
            <template #default="scoped">
              <dc-view v-model="scoped.row.tpmId" objectName="user" showKey="realName" />
            </template>
          </el-table-column>
          <el-table-column prop="pmId" label="内部PM">
            <template #default="scoped">
              <dc-view v-model="scoped.row.pmId" objectName="user" showKey="realName" />
            </template>
          </el-table-column>
          <el-table-column prop="etd" label="ETD" show-overflow-tooltip />
          <el-table-column prop="eta" label="ETA" show-overflow-tooltip />
          <el-table-column prop="address" label="操作">
            <template #default="scoped">
              <el-button link type="primary" @click="handleDelete(scoped.row)">删除</el-button>
              <el-button link type="primary" @click="handleEdit(scoped.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

  <!--  新增抽屉-->
  <el-drawer v-model="open.drawer" width="600px" :title="open.title" @close="cancel">
    <el-form ref="submitFormRef" :model="formData" :rules="rules" label-width="auto">
      <el-form-item label="专案号" prop="mtoNo">
        <el-input
          :value="formData.mtoNo"
          placeholder="请输入"
          clearable
          @click="openFinishedProductProject"
        />
      </el-form-item>
      <el-form-item label="成品名称" prop="name">
        <el-input :value="formData.name" placeholder="请输入" clearable disabled="disabled" />
      </el-form-item>
      <el-form-item label="成品码" prop="number">
        <el-input :value="formData.number" placeholder="请输入" clearable disabled="disabled" />
      </el-form-item>
      <el-form-item label="机构工程" prop="institutionsId">
        <dc-select-user
          v-model="formData.institutionsId"
          placeholder="请选择"
          :multiple="false"
          :multiple-limit="1"
        />
      </el-form-item>
      <el-form-item label="电气工程" prop="electricalId">
        <dc-select-user
          v-model="formData.electricalId"
          placeholder="请选择"
          :multiple="false"
          :multiple-limit="1"
        />
      </el-form-item>
      <el-form-item label="电子工程" prop="electricalContrId">
        <dc-select-user
          v-model="formData.electricalContrId"
          placeholder="请选择"
          :multiple="false"
          :multiple-limit="1"
        />
      </el-form-item>
      <el-form-item label="软件工程" prop="softwareId">
        <dc-select-user
          v-model="formData.softwareId"
          placeholder="请选择"
          :multiple="false"
          :multiple-limit="1"
        />
      </el-form-item>
      <el-form-item label="内部PM" prop="pmId">
        <dc-select-user
          v-model="formData.pmId"
          placeholder="请选择"
          :multiple="false"
          :multiple-limit="1"
        />
      </el-form-item>
      <el-form-item label="TPM" prop="tpmId">
        <dc-select-user
          v-model="formData.tpmId"
          placeholder="请选择"
          :multiple="false"
          :multiple-limit="1"
        />
      </el-form-item>
      <el-form-item label="ETD" prop="eta">
        <el-date-picker
          v-model="formData.eta"
          type="date"
          placeholder="请选择时间"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD HH:mm:ss"
          clearable
        />
      </el-form-item>
      <el-form-item label="ETA" prop="etd">
        <el-date-picker
          v-model="formData.etd"
          type="date"
          placeholder="请选择时间"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD HH:mm:ss"
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup name="ProjectSubmit">
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue';
import Api from '@/api/index';
import { useRoute } from 'vue-router';
import Const from '@/const';

const route = useRoute(); // 获取当前路由对象

const { proxy } = getCurrentInstance();

const { DC_PMS_PROJECT_INDUSTRY, DC_PMS_PROJECT_QIOPMENT, DC_PMS_PROJECT_TYPE } = proxy.useCache([
  { key: 'DC_PMS_PROJECT_INDUSTRY' },
  { key: 'DC_PMS_PROJECT_QIOPMENT' },
  { key: 'DC_PMS_PROJECT_TYPE' },
]);

const pageData = reactive({
  tableData: null,
  queryParams: {
    current: 1,
    size: 100000,
  },
  projectList: null,
  formData: {},
  open: {
    drawer: false,
    title: null,
  },
  FinishedProductProjectRef: null,
  loading: false,
  rules: {
    mtoNo: [{ required: true, message: '请选择专案号', trigger: 'blur' }],
    name: [{ required: true, message: '请选择成品名称', trigger: 'blur' }],
    number: [{ required: true, message: '请输入成品码', trigger: 'blur' }],
    institutionsId: [{ required: true, message: '请选择机构工程', trigger: 'blur' }],
    electricalId: [{ required: true, message: '请选择电气工程', trigger: 'blur' }],
    electricalContrId: [{ required: true, message: '请选择电子工程', trigger: 'blur' }],
    softwareId: [{ required: true, message: '请选择软件工程', trigger: 'blur' }],
    pmId: [{ required: true, message: '请选择TPM', trigger: 'blur' }],
    tpmId: [{ required: true, message: '请选择内部PM', trigger: 'blur' }],
    eta: [{ required: true, message: '请选择ETD', trigger: 'blur' }],
    etd: [{ required: true, message: '请选择ETA', trigger: 'blur' }],
  },
  projectFormData: {
    fileIds: null,
    remark: null,
  },
  ProjectListRef: null,
  projectId: null,
});

const {
  tableData,
  queryParams,
  projectList,
  formData,
  open,
  FinishedProductProjectRef,
  loading,
  rules,
  projectFormData,
  ProjectListRef,
  projectId,
} = toRefs(pageData);
onMounted(() => {
  getDetail();
  getData();
});
const getDetail = async () => {
  const params = {
    id: route.params.id,
  };
  const res = await Api.pdp.deliverystart.detail(params);
  const { code, data } = res.data;
  if (code == 200) {
    projectFormData.value = res.data.data;
    await getProjectDetail(data.projectId);
  }
};

const getProjectDetail = async projectId => {
  const params = { id: projectId };
  const projectRes = await Api.pdp.project.detail(params);
  projectList.value = projectRes.data.data;
};

const getData = async () => {
  const params = {
    ...queryParams.value,
    deliveredId: route.params.id,
  };
  const res = await Api.pdp.deliverystartsubmit.list(params);
  const { code, data } = res.data;
  if (code == 200) {
    tableData.value = data.records;
  }
};

// 新增
const handleAdd = () => {
  open.value.drawer = true;
  open.value.title = '新增专案明细';
  formData.value = {
    institutionsId: projectList.value.institutionsDriId,
    electricalId: projectList.value.electricalDriId,
    electricalContrId: projectList.value.electricalDriId,
    softwareId: projectList.value.softwareDriId,
    tpmId: projectList.value.tpmDriId,
    pmId: projectList.value.pmDriId,
  };
};

// 确认需求单
const openFinishedProductProject = () => {
  FinishedProductProjectRef.value.openDialog();
};
// 确认需求单
const confirmFinishedProductProject = data => {
  // 专案号
  formData.value.mtoNo = data[0].billNo;
  // 成品名称
  formData.value.name = data[0].name;
  // 成品码
  formData.value.number = data[0].number;
};
// 确认项目名称
const openProjectList = () => {
  ProjectListRef.value.openDialog();
};

// 确认项目名称
const confirmProjectList = data => {
  getProjectDetail(data[0].id);
  projectId.vlaue = data[0].id;
};

const cancel = () => {
  open.value.drawer = false;
  formData.value = {};
};

// 保存 确认创建
const submitForm = async () => {
  loading.value = true;
  proxy.$refs['submitFormRef'].validate(async valid => {
    if (valid) {
      const form = {
        ...formData.value,
        deliveredId: route.params.id,
        projectId: projectList.value.id,
      };
      const res = await Api.pdp.deliverystartsubmit.submit(form);
      const { code, msg } = res.data;
      if (code === 200) {
        open.value.drawer = false;
        proxy.$message.success(msg);
        getData();
      }
    }
  });
  loading.value = false;
};
// 删除
const handleDelete = row => {
  const ids = row.id;
  proxy
    .$confirm(`确定将“[${ids}]”数据删除?`, {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => Api.pdp.deliverystartsubmit.remove({ ids }))
    .then(() => {
      proxy.$message({
        type: 'success',
        message: '操作成功!',
      });
      getData();
    });
};

const handleSubmit = async () => {
  const params = {
    ...projectFormData.value,
    fileIds: proxy.arrayToIdsString({
      array: projectFormData.value.fileIds,
    }),
    id: route.params.id,
    projectId: projectId.vlaue,
  };
  const res = await Api.pdp.deliverystart.submit(params);
  const { code, msg } = res.data;
  if (code === 200) {
    proxy.$message.success(msg);
    window.history.back();
  }
};

// 编辑
const handleEdit = row => {
  open.value.drawer = true;
  open.value.title = '编辑启动会';
  formData.value = row;
};

// 取消
const handleCancel = () => {
  window.history.back();
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dadbe0;
  padding: 0 0 16px 0;

  &-title {
    font-weight: bold;
    font-size: 18px;
    color: #333333;
    line-height: 18px;
  }
}

.main {
  margin-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #dadbe0;

  &-title {
    display: flex;
    font-weight: bold;
    font-size: 32px;
    color: #333333;
    line-height: 32px;

    img {
      margin-left: 8px;
    }
  }

  &-container {
    display: flex;
    gap: 46px;

    &-item {
      display: flex;
      margin-top: 20px;
      width: 180px;

      &-label {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 14px;
      }

      &-value {
        flex: 1;
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        line-height: 16px;
      }

      &-remark {
        display: flex;
        margin-top: 20px;

        &-label {
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          line-height: 14px;
        }

        &-value {
          flex: 1;
          font-weight: 500;
          font-size: 14px;
          color: #333333;
          line-height: 16px;
        }
      }
    }
  }
}

.footer {
  margin-top: 20px;

  &-title {
    display: flex;
    flex-wrap: wrap;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    line-height: 16px;

    &::before {
      margin-right: 4px;
      display: block;
      content: '';
      width: 4px;
      height: 13px;
      background-color: #f78431;
    }
  }

  &-btn {
    margin-top: 20px;
  }

  &-table {
    margin-top: 20px;
  }
}
</style>
